<!DOCTYPE HTML>
<html>
<head>
<!--jQuery dependencies-->
    <link rel="stylesheet" href="../../pqgrid/css/jquery-ui-base-1.9.1.css" />
    <script src="../../pqgrid/js/jquery-1.9.1.min.js"></script>    
    <script src="../../pqgrid/js/jquery-ui-1.9.2.min.js"></script>
<!--PQ Grid files-->
    <link rel="stylesheet" href="../../pqgrid/pqgrid.min.css" />
    <script src="../../pqgrid/pqgrid.min.js"></script>
<!--PQ Grid Office theme-->
    <link rel="stylesheet" href="../../pqgrid/themes/office/pqgrid.css" />

    <style type="text/css">
	tr.green td { background: lightgreen;}
    tr.yellow td { background: yellow;}
	</style>

<script>
    $(function () {
    var arrayData = [
        { rank: 1, company: 'Exxon Mobil', revenues: 339938.0, profits: 36130.0 },
        { rank: 2, company: 'Wal-Mart Stores', revenues: 315654.0, profits: 11231.0 },
        { rank: 3, company: 'Royal Dutch Shell', revenues: 306731.0, profits: 25311.0 },
        { rank: 4, company: 'BP', revenues: 267600.0, profits: 22341.0 },
        { rank: 5, company: 'General Motors', revenues: 192604.0, profits: -10567.0 },
        { rank: 6, company: 'Chevron', revenues: 189481.0, profits: 14099.0 },
        { rank: 7, company: 'DaimlerChrysler', revenues: 186106.3, profits: 3536.3 },
        { rank: 8, company: 'Toyota Motor', revenues: 185805.0, profits: 12119.6 },
        { rank: 9, company: 'Ford Motor', revenues: 177210.0, profits: 2024.0 },
        { rank: 10, company: 'ConocoPhillips', revenues: 166683.0, profits: 13529.0 },
        { rank: 11, company: 'General Electric', revenues: 157153.0, profits: 16353.0 },
        { rank: 12, company: 'Total', revenues: 152360.7, profits: 15250.0 },
        { rank: 13, company: 'ING Group', revenues: 138235.3, profits: 8958.9 },
        { rank: 14, company: 'Citigroup', revenues: 131045.0, profits: 24589.0 },
        { rank: 15, company: 'AXA', revenues: 129839.2, profits: 5186.5 },
        { rank: 16, company: 'Allianz', revenues: 121406.0, profits: 5442.4 },
        { rank: 17, company: 'Volkswagen', revenues: 118376.6, profits: 1391.7 },
        { rank: 18, company: 'Fortis', revenues: 112351.4, profits: 4896.3 },
        { rank: 19, company: 'Crédit Agricole', revenues: 110764.6, profits: 7434.3 },
        { rank: 20, company: 'American Intl. Group', revenues: 108905.0, profits: 10477.0 }
    ];
    
    var totalData,
        averageData;
    //calculate sum of 3rd and 4th column.
    function calculateSummary() {
        var revenueTotal = 0,
    profitTotal = 0;
        for (var i = 0; i < arrayData.length; i++) {
            var row = arrayData[i];
            revenueTotal += parseFloat(row["revenues"]);
            profitTotal += parseFloat(row["profits"]);
        }
        var revenueAverage = $.paramquery.formatCurrency(revenueTotal / arrayData.length);
        var profitAverage = $.paramquery.formatCurrency(profitTotal / arrayData.length);

        revenueTotal = $.paramquery.formatCurrency(revenueTotal);
        profitTotal = $.paramquery.formatCurrency(profitTotal);

        totalData = { rank: "<b>Total</b>", company: "", revenues: revenueTotal, profits: profitTotal, pq_rowcls: 'green' };
        averageData = { rank: "<b>Average</b>", company: "", revenues: revenueAverage, profits: profitAverage, pq_rowcls: 'yellow' };
    }
    var obj = { width: "80%", height: 400,
        title: "Summary of rows", 
        resizable: true, 
        //freezeCols: 1,        
        flexHeight: true        
    };
    obj.columnTemplate = { width: '25%' };
    obj.colModel = [
        { title: "Rank", align: "right", dataType: "integer", dataIndx: "rank", width: '15%' },
        { title: "Company", dataIndx: "company", width: '35%' },
        { title: "Revenues ($ millions)", align: "right", dataType: "float", dataIndx: "revenues" },
        { title: "Profits ($ millions)", align: "right", dataType: "float", dataIndx: "profits" }
    ];
    obj.dataModel = {
        data: arrayData
    };
    obj.pageModel = {
        type: "local",
        rPP: 10,
        rPPOptions: [10, 15, 20]
    };
    var $summary = "";
    obj.render = function (evt, ui) {
        $summary = $("<div class='pq-grid-summary'  ></div>")
            .prependTo($(".pq-grid-bottom", this));
        calculateSummary();
    }
    obj.cellBeforeSave = function (evt, ui) {
        //debugger;
        var cd = ui.newVal;
        if (cd == "") {
            return false;
        }
    }
    //refresh summary whenever a value in any cell changes.
    obj.cellSave = function (evt, ui) {
        calculateSummary();
        obj.refresh.call(this);
    }
    obj.refresh = function (evt, ui) {
        var data = [totalData, averageData]; //JSON (array of objects)
        var obj = { data: data, $cont: $summary }
        $(this).pqGrid("createTable", obj);        
    }
    var $grid = $("#grid_summary").pqGrid(obj);
});
        
</script>    
</head>
<body>
Any number of rows can be frozen in ParamQuery grid. 
In the below example 2 rows are frozen at the bottom to display the summary of rows. 
Summary is refreshed whenever a cell value changes.
<div id="grid_summary" style="margin:auto;"></div>

</body>

</html>
